<template>
	<view class="uni-list-box">
		<uni-list-item direction="column" :clickable="true" 
			:customStyle="{padding: '0 12px'}"
			:to="'/uni_modules/zgj-pages/pages/chdetail/chdetail?id='+item.id" v-for="(item,index) in list"
			:key="index" style="margin-top: 10rpx;">
			<!-- 通过body插槽定义列表内容显示 -->
			<template v-slot:body>
				<view class="zgj-list-box uni-mt-4"> 
					<view class="uni-thumb">
						<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
						<image class="thumb-image"
							:src="item.logo? 'https://images.51zuhuobao.com/images/'+item.logo+'?x-oss-process=image/resize,w_300,limit_0' : null"
							mode="aspectFill"></image>
					</view>
					<view class="uni-content">
						<view class="zgj-row ch-lst-title">
							<image v-if="item.grade_state===1 && item.grade===12"
								src="https://cheche.oss-cn-beijing.aliyuncs.com/xiaochengxu/img/gold_icon%402x.png" />
							<image v-if="item.grade_state===1 && item.grade===11"
								src="https://cheche.oss-cn-beijing.aliyuncs.com/xiaochengxu/img/yin_icon%402x.png" />
							<image v-if="item.grade_state===1 && item.grade===10"
								src="https://cheche.oss-cn-beijing.aliyuncs.com/xiaochengxu/img/tong_icon%402x.png" />
							<text class="ch-name">{{item.name}}</text>
						</view>
						
						<view class="tip uni-ellipsis-1" v-if="item.brand">车系：{{item.brand}}</view>
						<view class="tip uni-ellipsis-1"  style="color: #808080;" v-if="item.main_bussiness">分类：{{item.main_bussiness}}</view>
						<!-- <view class="tip" v-if="item.market">商圈：{{item.market}}</view> -->
						<!-- <view class="tip">浏览：{{item.viewed_num}}次</view> -->
					
						<view class="zgj-row tags">
							<uni-tag class="tag" style="font-weight: 500;" v-if="item.is_leak===0" text="实力卖家" type="error" :inverted="true" size="mini"></uni-tag>
							<uni-tag class="tag" style="font-weight: 500;"  v-if="item.verify_state===1"text="证照齐全" type="primary" :inverted="true" 
								size="mini"></uni-tag>
							<uni-tag class="tag" style="font-weight: 500;"  v-if="item.dprz" :inverted="true" text="认证商家" type="success" size="mini"></uni-tag>
							<uni-tag class="tag" style="font-weight: 500;"  v-if="item.bzj" :inverted="true" text="保证金" type="success" size="mini"></uni-tag>
							<uni-tag class="tag" style="font-weight: 500;"  v-if="item.pps" :inverted="true" text="品牌商" type="success" size="mini"></uni-tag>
						</view>
						
						<!-- 浏览量 -->
						<view class="page-view">
							<uni-icons type="eye" size="20" color="#C4C4C4"></uni-icons>
							{{item.viewed_num}}
						</view>
					</view>
				</view>
				<!-- 地址和电话 -->
				<view class="address-foot">
					<view class="address-msg">商圈：{{item.full_address}}</view>
					<view v-if="item.phones.length>0" class="phone-btn" @tap.stop="onphone(item)">
						立即联系
					</view>
				</view>
			</template>
		</uni-list-item>
	</view>
</template>

<script>
	import Stat from '../../common/stat.js'
	export default {
		name: "zgj-channel",
		mixins:[Stat],
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			onphone(item) {
				console.log(item)
				uni.showActionSheet({
					itemList: item.phones,
					success: (e) => {
						let phone = item.phones[e.tapIndex]
						uni.makePhoneCall({
							phoneNumber: phone,
							success: () => {
								this.statTel({phone:phone,channel_id:item.id})								
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.uni-list-box {
		background-color: #F8F9F8;
	}
	.thumb-image {
		width: 100%;
		height: 100%;
	}

	.ch-lst-title {
		align-items: center !important;

		.ch-name {
			font-size: 30rpx;
			margin-left: 3px;
			white-space: nowrap; /* 禁止文本换行 */
			overflow: hidden; /* 隐藏超出部分 */
			text-overflow: ellipsis; /* 超出部分用省略号表示 */
		}

		image {
			width: 55rpx;
			height: 55rpx;
			min-width: 55rpx;
		}

	}

	.tip {
		font-size: 24rpx;
		margin-left:4px;
	}
	.tags .tag {
		margin-left: 4px;
		// font-size: 22rpx;
	}
	
	.zgj-list-box {
		.uni-thumb {
			width: 155rpx;
			height: 150rpx;
		}
		.uni-content {
			width: calc(100% - 165rpx);
			position: relative;
			.page-view {
				position: absolute;
				right: 30rpx;
				top: 56%;
				transform: translateY(-40%);
				font-size: 24rpx;
				color: #ADADAD;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
		}
		
	}
	
	.address-foot {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #F2F2F2;
		margin-top: 20rpx;
		padding: 15rpx 0;
		
		.address-msg {
			display: block;
			color: #808080;
			font-size: 22rpx;
			width: calc(100% - 150rpx);
			white-space: nowrap; /* 禁止文本换行 */
			overflow: hidden; /* 隐藏超出部分 */
			text-overflow: ellipsis; /* 超出部分用省略号表示 */
		}
		
		.phone-btn {
			width: 116rpx;
			height: 40rpx;
			font-size: 22rpx;
			border-radius: 8rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(196, 23, 30, 1);
		}
	}
	
</style>